<template>
  <view class="computedScore">
    <classifyHead title="业绩统计" />
    <view class="content">
      <view class="box">
        <view class="name">累计业绩</view>
        <view class="box-item">
          <view class="left">
            <view>竞购积分 </view>
            <view >0.00</view>
            <view style="margin-top: 20rpx">产品消费积分</view>
            <view>0.00</view>
          </view>
          <view class="right">
            <view>权益积分</view>
            <view>0.00</view>
            <view style="margin-top: 20rpx">民生消费积分</view>
            <view>0.00</view>
          </view>
        </view>
      </view>
    </view>

    <view class="content">
      <view class="box">
        <view class="name">昨日业绩</view>
        <view class="box-item">
          <view class="left">
            <view>竞购积分 </view>
            <view>0.00</view>
            <view style="margin-top: 20rpx">产品消费积分</view>
            <view>0.00</view>
          </view>
          <view class="right">
            <view>权益积分</view>
            <view>0.00</view>
            <view style="margin-top: 20rpx">民生消费积分</view>
            <view>0.00</view>
          </view>
        </view>
      </view>
    </view>

    <view class="content">
      <view class="box">
        <view class="box-top">
          <view class="name" style="margin-left: 280rpx">本月业绩</view>

          <picker
            mode="selector"
            :range="monthOptions"
            range-key="label"
            @change="onPickerChange"
          >
            <view class="dropdown-button">
              {{ selectedLabel || "选择月份" }}
            </view>
          </picker>
        </view>
        <view class="box-item">
          <view class="left">
            <view>竞购积分 </view>
            <view>0.00</view>
            <view style="margin-top: 20rpx">产品消费积分</view>
            <view>0.00</view>
          </view>
          <view class="right">
            <view>权益积分 </view>
            <view>0.00</view>
            <view style="margin-top: 20rpx">民生消费积分</view>
            <view>0.00</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import classifyHead from "@/components/classifyHead.vue";
const selectedLabel = ref("");

const monthOptions = [
  { label: "2024年1月", value: "2024-01" },
  { label: "2024年2月", value: "2024-02" },
  { label: "2024年3月", value: "2024-03" },
];

const onPickerChange = (e) => {
  const index = e.detail.value;
  selectedLabel.value = monthOptions[index].label;
};
</script>

<style lang="scss" scoped>
.computedScore {
  .content {
    padding: 0 20rpx;
    .box {
      width: 100%;
      height: 260rpx;
      box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.15);
      margin-top: 40rpx;
      border-radius: 30rpx;
      padding-top: 20rpx;
      .box-top {
        display: flex;
      }
      .name {
        color: #d19848;
        text-align: center;
        font-weight: 550;
      }

      .dropdown-button {
        width: 150rpx;
        height: 40rpx;
        background: #d19848;
        color: white;
        border-radius: 30px;
        text-align: center;
        margin-left: 130rpx;
        padding: 10rpx;
      }
      .box-item {
        display: flex;
        justify-content: space-between;
        padding: 0 30rpx;
        margin-top: 10rpx;
        .left {
          width: 50%;
          text-align: left;
        }
        .right {
          width: 50%;
          text-align: right;
        }
      }
    }
  }
}
</style>